<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>顶部销售引导</title>
</head>

<body>


    <div class="announcement-bar">
        <!--整个内容-->
        <div class="announcement-bar__content">
            <!--左边内容-->
            <div class="announcement-bar__primary">
                <div class="announcement-bar__title">
                    <div align="center">
                        <!--文本内容-->
                        <div class="announcement-bar__title-desktop">

                            <strong>7 days </strong>
                            of WordPress plugins, themes & templates - for free!*

                        </div>
                        <!--移动端显示-->
                        <div class="announcement-bar__title-mobile">
                            移动端展示内容
                        </div>
                        <!--跳转按钮-->
                        <a href="#">Start 7-Day Free Trial</a>
                    </div>
                </div>
            </div>
            <!--右边清除符号-->
            <div class="announcement-bar__secondary">
                <a href="#" title="111" class="announcement-bar__close-link">
                    <i class="announcement-bar__close-icon">X</i>
                </a>
            </div>
        </div>
    </div>

    https://code.tutsplus.com/tutorials/object-oriented-autoloading-in-wordpress-part-1--cms-27381?_ga=2.234627870.1409888621.1670811951-1064583753.1670811951
    <style>
        .announcement-bar {
            display: block;

            width: 100%;
            height: 52px;
            line-height: 52px;
            font-size: 16px;

            background-repeat: repeat;

            background-image: linear-gradient(to left, rgb(52, 76, 172), rgb(46, 87, 175), rgb(44, 96, 176), rgb(48, 105, 176), rgb(57, 114, 175), rgb(54, 113, 176), rgb(51, 112, 176), rgb(47, 111, 177), rgb(30, 100, 179), rgb(23, 87, 178), rgb(30, 74, 176), rgb(45, 58, 172));
            background-size: inherit;
            background-color: rgb(39, 58, 178);
            color: rgb(255, 255, 255);
        }

        .announcement-bar__content {
            display: flex;
            flex-flow: row nowrap;
            align-items: center;
            height: 52px;
        }



        /*左边*/
        .announcement-bar__primary {
            white-space: nowrap;
            flex: 1 0 auto;
            display: flex;
            flex-flow: nowrap;
            align-items: center;
            height: 52px;
        }

        .announcement-bar__title {
            height: 52px;
            line-height: 52px;
        }

        .announcement-bar__title a {
            border-radius: 4px;
            background-color: #F6304F;
            padding: 0px 20px;
            box-shadow: 0px 0px 0px #fc9f97;
            margin: 10px 10px 10px 10px;
            font-size: 12px;
            letter-spacing: 0.07em;
            height: 30px;
            line-height: 30px;
            text-decoration: none;
            color: #FFFFFF;
            font-weight: 700;
            display: inline-block;
        }

        /*右边*/
        .announcement-bar__secondary {
            text-align: right;
            flex: 0 0 auto;
            height: 52px;
        }

        .announcement-bar__close-link {
            font-weight: 700;
            color: #136fd2;
            text-decoration: underline;
            display: inline-block;
            white-space: nowrap;
        }

        .announcement-bar__close-icon {
            margin-left: 4px;
            vertical-align: middle;
            font-size: 16px;
            color: #fff;
            font-style: normal;
        }


        @media (min-width: 680px) {
            .announcement-bar__content {
                margin: 0 auto;
            }

            .announcement-bar__title {
                display: inline-block;
            }

            .announcement-bar__title-desktop {
                display: inline-block;
            }

            .announcement-bar__title-mobile {
                display: none;
            }
        }


        @media (min-width: 1340px) {
            .announcement-bar__content {
                max-width: 1290px;
            }
        }

        @media (min-width: 1024px) and (max-width: 1339px) {
            .announcement-bar__content {
                max-width: 960px;
            }
        }

        @media (min-width: 680px) and (max-width: 1023px) {
            .announcement-bar__content {
                max-width: 630px;
            }

            .announcement-bar__title-desktop {
                display: inline-block;
            }
        }



        @media (max-width: 679px) {
            .announcement-bar__content {
                width: 100%;
                padding: 0 10px;
                overflow: hidden;
            }

            .announcement-bar__title {
                display: block;
                white-space: normal;
                margin: 10px 0;
                padding: 0;
                width: 100%;
            }

            .announcement-bar__title-desktop {
                display: none;
            }

            .announcement-bar__title-mobile {
                display: inline-block;
            }
        }

        /*额外*/
        body {
            margin: 0;
            padding: 0;
        }

        * {
            box-sizing: border-box;
        }
    </style>
</body>

</html>